<template>
	<view>
		请输入三位数
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">one</view>
					<input class="uni-input" type="number" name="one" placeholder="请输入第一个数字" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">two</view>
					<input class="uni-input" type="number" name="two" placeholder="请输入第二个数字" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">three</view>
					<input class="uni-input"type="number" name="three" placeholder="请输入第三个数字" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">算一卦</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
		<view v-if='shang!=""'>上卦：{{shang}}</view>
		<view v-if='xia!=""'>下卦：{{xia}}</view>
		<view v-if='yao!=""'>爻：{{yao}}
			<image class="image" mode="widthFix" src="/static/images/64卦.png"></image>
		</view>
	</view>
</template>

<script>
	import graceChecker from "../../common/graceChecker.js"
	export default {
		data() {
			return {
				shang:"",
				xia:"",
				yao:0
			}
		},
		onShareAppMessage:function(res){
			return {
				title:"算一卦",
				page:"/page/index/index"
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			    //定义表单规则
			    var rule = [
			        {name:"one", checkType : "notnull", checkRule:"",  errorMsg:"请输入第一个数字"},
			        {name:"two", checkType : "notnull", checkRule:"",  errorMsg:"请输入第二个数字"},
			        {name:"three", checkType : "notnull", checkRule:"",  errorMsg:"请输入第三个数字"}
			    ];
			    //进行表单检查
			    var formData = e.detail.value;
			    var checkRes = graceChecker.check(formData, rule);
			    if(checkRes){
			        uni.showToast({title:"验证通过!", icon:"none"});
			    }else{
			        uni.showToast({ title: graceChecker.error, icon: "none" });
			    }
				
				var arr = ['乾（天）一','兑（泽）二','离（火）三','震（雷）四','巽（风）五','坎（水）六','艮（山）七','坤（地）八']
				this.shang = arr[(formData.one%8-1)<0?7:(formData.one%8-1)];
				console.log(((formData.two+formData.three)%8-1)<0?7:((formData.two+formData.three)%8-1))
				this.xia = arr[((formData.two+formData.three)%8-1)<0?7:((formData.two+formData.three)%8-1)];
				this.yao = (formData.one+formData.two+formData.three)%6+"";
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>

</style>
